<template>
    <Content class="m-search-box" ref="searchBox">
        <!-- 搜索结果展示 -->
        <div class="search-result" v-if="searchKey !== ''">
            <!-- 搜索提示 -->
            <div class="search-title">
                搜索"<span class="highlight">{{searchKey}}</span>"
            </div>
            <!-- 标签tag -->
            <div class="search-tags">
                <div class="tags-box">
                    <div class="tag song">
                        <span class="text" :class="type===SONG_TYPE?'active':''"
                              @mousedown="tagMousedown('song')"
                              @mouseup="tagMouseup('song')"
                              @mouseleave="tagMouseleave('song')"
                              @click="selectType(SONG_TYPE,'song')"
                        >
                            歌曲
                        </span>
                        <div class="active-line" v-if="type===SONG_TYPE"></div>
                    </div>
                    <div class="tag video">
                        <span class="text" :class="type===MV_TYPE?'active':''"
                              @mousedown="tagMousedown('video')"
                              @mouseup="tagMouseup('video')"
                              @mouseleave="tagMouseleave('video')"
                              @click="selectType(MV_TYPE,'mv')">
                            视频
                        </span>
                        <div class="active-line" v-if="type===MV_TYPE"></div>
                    </div>
                    <div class="tag album">
                        <span class="text" :class="type===ALBUM_TYPE?'active':''"
                              @mousedown="tagMousedown('album')"
                              @mouseup="tagMouseup('album')"
                              @mouseleave="tagMouseleave('album')"
                              @click="selectType(ALBUM_TYPE,'album')">
                            专辑
                        </span>
                        <div class="active-line" v-if="type===ALBUM_TYPE"></div>
                    </div>
                    <div class="tag song-list">
                        <span class="text" :class="type===PLAYLIST_TYPE?'active':''"
                              @mousedown="tagMousedown('song-list')"
                              @mouseup="tagMouseup('song-list')"
                              @mouseleave="tagMouseleave('song-list')"
                              @click="selectType(PLAYLIST_TYPE,'playlist')">
                            歌单
                        </span>
                        <div class="active-line" v-if="type===PLAYLIST_TYPE"></div>
                    </div>
                    <div class="tag lyric">
                        <span class="text" :class="type===LYRIC_TYPE?'active':''"
                              @mousedown="tagMousedown('lyric')"
                              @mouseup="tagMouseup('lyric')"
                              @mouseleave="tagMouseleave('lyric')"
                              @click="selectType(LYRIC_TYPE,'lyric')">
                            歌词
                        </span>
                        <div class="active-line" v-if="type===LYRIC_TYPE"></div>
                    </div>
<!--                    <div class="tag singer">-->
<!--                        <span class="text" :class="type===9?'active':''"-->
<!--                              @mousedown="tagMousedown('singer')"-->
<!--                              @mouseup="tagMouseup('singer')"-->
<!--                              @mouseleave="tagMouseleave('singer')"-->
<!--                              @click="selectType(9,'singer')">-->
<!--                            歌手-->
<!--                        </span>-->
<!--                        <div class="active-line" v-if="type===9"></div>-->
<!--                    </div>-->
                </div>
                <span class="search-result-num" v-if="isShow">{{handleSearchNum}}</span>
            </div>
            <!-- 搜索内容 -->
            <m-slider class="wrapper" ref="wrapper">
                <div class="search-content-box" ref="scroll" @scroll="scroll">
                    <!--单曲搜索-->
                    <div class="search-song-result-box" v-if="type === SONG_TYPE && isShow && !isError">
                        <!--最佳匹配-->
                        <div class="best-search" v-if="bestSearch">
                            <div class="title">最佳匹配</div>
                            <div class="best-search-content">
                                <div class="content" @click="toSingerDetail(bestSearch.singer)">
                                    <div class="img-box">
                                        <img ondragstart="return false"
                                             v-lazy="handleLazyImage(bestSearch.singer.singerPic)"
                                             :key="bestSearch.singer.singerPic"
                                             :alt="bestSearch.singer.singerName"
                                        >
                                    </div>
                                    <div class="info-content">
                                        <div class="info name">
                                            <span>歌手：{{bestSearch.singer.singerName}}</span>
                                        </div>
                                        <div class="info song-num">
                                            <span>歌曲：{{bestSearch.songNum}}首</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--搜索的单曲-->
                        <m-search-song-list
                                class="song-list"
                                :hiLights="searchRes.hiLights"
                                :songlist="searchRes.songList"
                                :selectSong="selectSong"
                                :currentPlaySong="currentPlaySong"
                                :playStatus="playStatus"
                                :playList="playList"
                                @selectItem="selectItem"
                                @playSong="playSong"
                                @toSingerDetail="toSingerDetail"
                        />
                        <!--更多加载loading-->
                        <!--                        <m-more-search-loading/>-->
                        <m-location-play-song v-if="_listHasSong" @location="location"/>
                    </div>
                    <!--视频搜索-->
                    <div class="search-video-result-box" v-if="type === MV_TYPE && isShow && !isError">
                        <m-video-list :videos="searchRes.videos" @toSingerDetail="toSingerDetail"
                                      @playVideo="playVideo"/>
                        <!--更多加载loading-->
                    </div>
                    <!--专辑-->
                    <div class="search-album-result-box" v-if="type === ALBUM_TYPE && isShow && !isError">
                        <m-album-list :albums="searchRes.albums"/>
                        <!--更多加载loading-->
                    </div>
                    <!--歌单-->
                    <div class="search-disst-result-box" v-if="type === PLAYLIST_TYPE && isShow && !isError">
                        <div class="dissts-search">
                            <m-disst-list :dissts="searchRes.dissts" :is-recommend="false"
                                          @songListDetail="songListDetail"
                                          @playDisst="playDisst"/>
                            <m-disst-play-loading ref="disstLoading"/>
                        </div>
                        <!--更多加载loading-->
                    </div>
                    <!--歌词-->
                    <div class="search-lyric-result-box" v-if="type === LYRIC_TYPE && isShow && !isError">
                        <m-search-lyric @toSingerDetail="toSingerDetail" :lyrics="searchRes.lyrics"/>
                        <!--更多加载loading-->
                    </div>
                    <!--歌手-->
                    <div class="search-singer-result-box" v-if="type === 9 && isShow && !isError">
                        <m-search-singer-list @toSingerDetail="toSingerDetail" :singers="searchRes.singers"/>
                        <!--更多加载loading-->
                    </div>
                </div>
            </m-slider>
            <m-search-loading v-if="!isShow && !isError"/>
            <scroll-top v-if="showToTop" @toTop="toTop"/>
            <m-error-page v-if="isError" @refresh="refresh"/>
        </div>
        <!--搜索词为空显示-->
        <div class="no-searchKey" v-else>
            <h1 class="no-search-tip">
                暂无搜索词,快去输入搜索词吧
            </h1>
        </div>
    </Content>
</template>

<script>
  import { Content } from 'view-design'
  import { mapActions, mapGetters, mapMutations } from 'vuex'
  import { createDisstDetailData, createReqNoParamData, createSearchSongList } from '../../../common/js/createReqData'
  import { search } from '../../../api/search'
  import MSongList from '../../../components/m-song-list/m-song-list'
  import MSearchSongList from './m-search-song-list/m-search-song-list'
  import ScrollTop from '../../../components/scrollTop/scroll-top'
  import { _normalizeSongs, listHasSong, sleep } from '../../../common/js/util'
  import MLocationPlaySong from '../../../components/m-location-play-song/m-location-play-song'
  import MSearchLoading from './m-search-loading/m-search-loading'
  import MMoreSearchLoading from './m-search-loading/m-more-search-loading'
  import MSlider from '../../../components/m-slider/m-slider'
  import { timeOut } from '../../../common/js/config'
  import MErrorPage from '../../../components/m-error-page/m-error-page'
  import SingerDefLazyImg from '../../../resources/images/singer_300.png'
  import MVideoList from '../../../components/m-video-list/m-video-list'
  import MAlbumList from '../../../components/m-album-list/m-album-list'
  import MDisstList from '../m-find-music/m-dissts/m-disst-list/m-disst-list'
  import { disstDetailSongList } from '../../../api/disst'
  import { ERR_OK } from '../../../api/config'
  import MDisstPlayLoading from '../../../components/m-disst-play-loading/m-disst-play-loading'
  import MSearchSingerList from './m-search-singer-slist/m-search-singer-list'
  import MSearchLyric from './m-search-lyric/m-search-lyric'
  import { getSearchData } from '../../../common/js/requestData'
  import { getSign } from '../../../common/js/sign'

  export default {
    name: 'm-search',
    components: {
      MSearchLyric,
      MSearchSingerList,
      MDisstPlayLoading,
      MDisstList,
      MAlbumList,
      MVideoList,
      MErrorPage,
      MSlider,
      MMoreSearchLoading,
      MSearchLoading,
      MLocationPlaySong,
      ScrollTop,
      MSearchSongList,
      MSongList,
      Content
    },
    computed: {
      ...mapGetters([
        'searchKey',
        'currentPlaySong',
        'playList',
        'playStatus'
      ]),
      _listHasSong () {
        return listHasSong(this.searchRes.songList, this.currentPlaySong)
      },
      // 图片懒加载 v-lazy配置对象
      handleLazyImage () {
        return (ImgSrc) => {
          return {
            src: ImgSrc,
            error: SingerDefLazyImg,
            loading: SingerDefLazyImg
          }
        }
      },
      handleSearchNum () {
        switch (this.type) {
          case this.SONG_TYPE: {
            return `找到${this.searchRes.songListTotalnum}首歌曲`
          }
          case this.MV_TYPE: {
            return `找到${this.searchRes.videosTotalnum}个视频`
          }
          case this.ALBUM_TYPE: {
            return `找到${this.searchRes.albumsTotalnum}张专辑`
          }
          case this.PLAYLIST_TYPE: {
            return `找到${this.searchRes.disstsTotalnum}个歌单`
          }
          case this.LYRIC_TYPE: {
            return `找到${this.searchRes.lyricTotalnum}个歌词`
          }
          case 9: {
            return `找到${this.searchRes.singerTotalnum}位歌手`
          }
        }
      }
    },
    data () {
      return {
        SONG_TYPE: 0,
        MV_TYPE: 4,
        ALBUM_TYPE: 2,
        PLAYLIST_TYPE: 3,
        LYRIC_TYPE: 7,
        SIGNER_TYPE: 9,
        num: 30,
        type: 0,
        typePage: {
          song: 1,
          mv: 1,
          album: 1,
          lyric: 1,
          playlist: 1,
          singer: 1
        },
        typeName: 'song',
        searchRes: null,
        bestSearch: null,
        selectSong: {},
        showToTop: false,
        scrollTop: 0,
        scrollHeight: 0,
        clientHeight: 0,
        isShow: false,
        screenHeight: document.body.clientHeight,
        isError: false
      }
    },
    mounted () {
      window.addEventListener('resize', () => {
        this.screenHeight = window.innerHeight
      })
      this.$refs.searchBox.$el.style.height = `${window.innerHeight - 102.1}px`
    },
    created () {
      this._search(this.type, this.typeName)
    },
    methods: {
      async _search (type, typeName) {
        this.isShow = false
        let reqData
        if (type === 'song_list') {
          reqData = createSearchSongList(this.searchKey, this.num, this.typePage[this.typeName], type, typeName)
        } else {
          let data = getSearchData(this.searchKey, this.num, this.typePage[this.typeName], type, typeName)
          let sign = getSign(data)
          reqData = createReqNoParamData(sign, data)
        }
        let res = await search(reqData, type).catch(() => {
          this.isError = true
        })
        for (let i = 0; i < 5; i++) {
          if (res.message !== 'success') {
            sleep(500)
            res = await search(reqData, type)
          } else {
            break
          }
        }
        if (res.message !== 'success') {
          this.isError = true
          return
        }
        this.handleSearchData(res)
        this.isShow = true
      },
      async _searchMore () {
        this.typePage[this.typeName] += 1
        let reqData
        if (this.type === 'song_list') {
          reqData = createSearchSongList(this.searchKey, this.num, this.typePage[this.typeName], this.type, this.typeName)
        } else {
          let data = getSearchData(this.searchKey, this.num, this.typePage[this.typeName], this.type, this.typeName)
          let sign = getSign(data)
          reqData = createReqNoParamData(sign, data)
        }
        let res = await search(reqData, this.type).catch(() => {
          this.isError = true
        })
        if (res.message === 'success') {
          this.handleSearchData(res, 'more')
        }
      },
      handleSearchData (res, type = 'first') {
        switch (this.type) {
          case this.SONG_TYPE: {
            if (type !== 'more') {
              if (!this.searchRes) {
                this.searchRes = {}
              }
              this.searchRes.songList = _normalizeSongs(res.songList)
              this.searchRes.hiLights = res.hiLights
              this.searchRes.songListTotalnum = res.songListTotalnum
            } else {
              this.searchRes.songList = this.searchRes.songList.concat(_normalizeSongs(res.songList))
              this.searchRes.hiLights = this.searchRes.hiLights.concat(res.hiLights)
              this.searchRes.songListTotalnum = res.songListTotalnum
            }
            if (res.zhida !== null) {
              this.bestSearch = res.zhida
            } else {
              this.bestSearch = null
            }
            break
          }
          case this.MV_TYPE: {
            if (type !== 'more') {
              if (!this.searchRes) {
                this.searchRes = {}
              }
              this.searchRes.videos = res.videos
              this.searchRes.videosTotalnum = res.videosTotalnum
            } else {
              this.searchRes.videos = this.searchRes.videos.concat(res.videos)
              this.searchRes.videosTotalnum = res.videosTotalnum
            }
            break
          }
          case this.ALBUM_TYPE: {
            if (type !== 'more') {
              if (!this.searchRes) {
                this.searchRes = {}
              }
              this.searchRes.albums = res.albums
              this.searchRes.albumsTotalnum = res.albumsTotalnum
            } else {
              this.searchRes.albums = this.searchRes.albums.concat(res.albums)
              this.searchRes.albumsTotalnum = res.albumsTotalnum
            }
            break
          }
          case this.PLAYLIST_TYPE: {
            if (type !== 'more') {
              if (!this.searchRes) {
                this.searchRes = {}
              }
              this.searchRes.dissts = res.dissts
              this.searchRes.disstsTotalnum = res.disstsTotalnum
            } else {
              this.searchRes.dissts = this.searchRes.dissts.concat(res.dissts)
              this.searchRes.disstsTotalnum = res.disstsTotalnum
            }
            break
          }
          case this.LYRIC_TYPE: {
            if (type !== 'more') {
              if (!this.searchRes) {
                this.searchRes = {}
              }
              this.searchRes.lyrics = res.showData
              this.searchRes.songs = _normalizeSongs(res.songs)
              this.searchRes.lyricTotalnum = res.lyricTotalnum
            } else {
              this.searchRes.lyrics = this.searchRes.lyrics.concat(res.showData)
              this.searchRes.songs = this.searchRes.songs.concat(_normalizeSongs(res.songs))
              this.searchRes.lyricTotalnum = res.lyricTotalnum
            }
            break
          }
          case 9: {
            if (type !== 'more') {
              if (!this.searchRes) {
                this.searchRes = {}
              }
              this.searchRes.singers = res.singer
              this.searchRes.singerTotalnum = res.singerTotalnum
            } else {
              this.searchRes.singers = this.searchRes.singers.concat(res.singer)
              this.searchRes.singerTotalnum = res.singerTotalnum
            }
            break
          }
        }
        this.$forceUpdate()
      },
      selectType (type, typeName) {
        if (this.type === type) {
          return
        }
        this.type = type
        this.typeName = typeName
        switch (type) {
          case this.SONG_TYPE: {
            if (!this.searchRes.songList) {
              this._search(type, typeName)
            }
            break
          }
          case this.MV_TYPE: {
            if (!this.searchRes.videos) {
              this._search(type, typeName)
            }
            break
          }
          case this.ALBUM_TYPE: {
            if (!this.searchRes.albums) {
              this._search(type, typeName)
            }
            break
          }
          case this.PLAYLIST_TYPE: {
            if (!this.searchRes.dissts) {
              this._search(type, typeName)
            }
            break
          }
          case this.LYRIC_TYPE: {
            if (!this.searchRes.lyrics) {
              this._search(type, typeName)
            }
            break
          }
          case 9: {
            if (!this.searchRes.singers) {
              this._search(type, typeName)
            }
            break
          }
        }
        this.toTop()
      },
      initSearch () {
        this.typePage = {
          song: 1,
          mv: 1,
          album: 1,
          lyric: 1,
          playlist: 1,
          singer: 1
        }
        this.searchRes = null
        this.bestSearch = null
        this.isError = false
      },
      reSearch () {
        // 修改搜索词
        // 1.重置搜索
        this.initSearch()
        this._search(this.type, this.typeName)
      },
      // 鼠标点击标签时样式改变
      tagMousedown (className) {
        let dom = document.getElementsByClassName(className)[0]
        dom.style.transform = 'translate3d(2px,2px,0)'
      },
      tagMouseup (className) {
        let dom = document.getElementsByClassName(className)[0]
        dom.style.transform = 'translate3d(0,0,0)'
      },
      tagMouseleave (className) {
        let dom = document.getElementsByClassName(className)[0]
        dom.style.transform = 'translate3d(0,0,0)'
      },
      // 定位
      location () {
        let index = this.searchRes.songList.findIndex((item) => item.id + '' === this.currentPlaySong.id + '')
        let location = 60 * (index + 1)
        this.$refs.wrapper.scrollTo(this.$refs.scroll, location, timeOut)
      },
      scroll () {
        this.scrollTop = this.$refs.scroll.scrollTop
        this.clientHeight = this.$refs.scroll.clientHeight
        this.scrollHeight = this.$refs.scroll.scrollHeight
        if (this.$refs.scroll.scrollTop > 100) {
          this.showToTop = true
        } else {
          this.showToTop = false
        }
      },
      toTop () {
        this.$refs.wrapper.scrollToTop(this.$refs.scroll, timeOut)
      },
      toSingerDetail (singer) {
        let router = `/singer/${singer.singerName}/${singer.singerMid}`
        if (this.$route.path !== router) {
          this.routerStack.push(router)
          this.setRouterStackPointer(this.routerStack.pointer)
          this.$router.replace({
            path: router
          })
        }
      },
      songListDetail (songList) {
        let router = `/disst/${songList.disstId}`
        if (this.$route.path !== router) {
          this.routerStack.push(router)
          this.setRouterStackPointer(this.routerStack.pointer)
          this.$router.replace({
            path: router
          })
        }
      },
      playVideo (video) {
        let router = `/video/${video.vid}`
        if (this.$route.path !== router) {
          this.routerStack.push(router)
          this.setRouterStackPointer(this.routerStack.pointer)
          this.$router.replace({
            path: router
          })
        }
      },
      playDisst (index) {
        let disst = this.searchRes.dissts[index]
        if (this.disstId !== disst.disstId) {
          if (disst.songlist === null) {
            this.$refs.disstLoading.openLoading()
            let reqData = createDisstDetailData(disst.disstId)
            disstDetailSongList(reqData).then(res => {
              if (res.code === ERR_OK) {
                this.searchRes.dissts[index].songlist = _normalizeSongs(
                  res.songs)
              }
              this.playDisstSong(this.searchRes.dissts[index])
              this.$refs.disstLoading.closeLoading()
            })
          } else {
            this.playDisstSong(disst)
          }
        }
      },
      // 播放整个列表
      playDisstSong (disst) {
        this.selectPlay(
          {
            list: disst.songlist,
            index: 0
          }
        )
      },
      selectItem (index) {
        this.selectSong = this.searchRes.songList[index]
      },
      // 播放当前歌曲
      playSong (song) {
        this.insertSong(song)
      },
      refresh () {
        this.isError = false
        this._search(this.type, this.typeName)
      },
      ...mapMutations({
        setRouterStackPointer: 'SET_ROUTER_STACK_POINTER',
        setNeedLogin: 'SET_NEED_LOGIN'
      }),
      ...mapActions([
        'selectPlay',
        'insertSong',
        'addToNext'
      ])
    },
    watch: {
      searchKey () {
        this.reSearch()
      },
      scrollTop (scrollTop) {
        if (scrollTop + this.clientHeight >= this.scrollHeight - 10) {
          setTimeout(() => {
            this._searchMore()
          }, 200)
        }
      },
      screenHeight () {
        this.$refs.searchBox.$el.style.height = `${window.innerHeight - 102.1}px`
      }
    }
  }
</script>

<style lang="less">
    .m-search-box {
        position: relative;
        z-index: 0;
        user-select: none;
        min-width: 820px;
        width: 100%;
        height: 100%;
        overflow: hidden;

        .search-result {
            width: 100%;
            height: 100%;

            .highlight {
                color: var(--font-active-color);
            }

            .search-title {
                height: 80px;
                padding: 0 30px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                background-color: var(--search-tip-background-color);
                color: #919192;
                font-size: 16px;
            }

            .search-tags {
                width: 100%;
                padding: 0 30px 20px 30px;
                margin-top: 20px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .tags-box {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    .tag {
                        width: 60px;
                        height: 30px;
                        font-size: 16px;
                        display: flex;
                        justify-content: space-between;
                        align-items: flex-start;
                        flex-flow: column;

                        .text {
                            color: var(--font-base-color);
                        }

                        .text:hover {
                            cursor: pointer;
                            color: var(--font-active-color);
                        }

                        .active {
                            color: var(--font-active-color);
                        }

                        .active-line {
                            height: 4px;
                            width: 32px;
                            background: var(--font-active-color);
                            border-radius: 4px;
                        }
                    }
                }

                .search-result-num {
                    color: var(--font-tow-color);
                    font-size: 12px;
                }
            }

            .wrapper {
                padding-bottom: 150px;

                .search-content-box {
                    position: relative;
                    height: 100%;
                    width: 100%;
                    overflow-y: scroll;
                    overflow-x: hidden;
                    padding: 0 22px 20px 30px;

                    .search-song-result-box {
                        margin-top: 10px;

                        .best-search {

                            .title {
                                height: 30px;
                                line-height: 30px;
                                color: #828385;
                                background: var(--search-tip-background-color);
                                padding: 0 30px 20px 30px;
                            }

                            .best-search-content {
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                height: 80px;
                                border-bottom: 1px solid var(--search-tip-background-color);

                                .content {
                                    width: 200px;
                                    height: 60px;
                                    padding: 5px 5px;
                                    background: var(--search-tip-background-color);

                                    .img-box {
                                        width: 50px;
                                        height: 50px;
                                        float: left;

                                        img {
                                            width: 100%;
                                            height: 100%;
                                            display: block;
                                        }
                                    }

                                    .info-content {
                                        display: flex;
                                        justify-content: space-around;
                                        align-items: start;
                                        flex-flow: column;
                                        height: 50px;
                                        font-size: 14px;
                                        color: var(--font-base-color);
                                        padding-left: 10px;

                                        .info {
                                            width: 100%;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                            white-space: nowrap;
                                        }

                                        .song-num {
                                            color: #918e8e;
                                            font-size: 12px;
                                        }
                                    }
                                }

                                .content:hover {
                                    cursor: pointer;
                                    background: var(--search-baseRes-hover-background-color);
                                }
                            }
                        }

                        .song-list {
                            width: 100%;
                        }
                    }
                }

                .search-content-box {
                    /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
                    -ms-overflow-style: none;
                }

                // 火狐
                scrollbar-color: transparent transparent;
                scrollbar-track-color: transparent;
                -ms-scrollbar-track-color: transparent;

                .search-content-box::-webkit-scrollbar {
                    /*滚动条整体样式*/
                    width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
                    height: 1px;
                }

                /*定义滚动条轨道 内阴影+圆角*/

                .search-content-box::-webkit-scrollbar-track-piece {
                    -webkit-border-radius: 2em;
                    -moz-border-radius: 2em;
                    border-radius: 2em;
                }

                /*定义滑块 内阴影+圆角*/

                .search-content-box::-webkit-scrollbar-thumb {
                    /*滚动条里面小方块*/
                    border-radius: 10px;
                    background-color: var(--scrollbar-thumb-background-color);
                }

                /*---鼠标点击滚动条显示样式--*/

                .search-content-box::-webkit-scrollbar-thumb:hover {
                    background-color: var(--scrollbar-thumb-hover-color);
                }

                .search-content-box::-webkit-scrollbar-thumb:active {
                    background-color: var(--scrollbar-thumb-active-color);
                }
            }
        }

        .no-searchKey {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            .no-search-tip {
                color: var(--font-active-color);
            }
        }
    }
</style>
